import React, { memo, useEffect, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import Header from '@/components/header-rcm/header'
import SongList from '@/components/song-list/song-list'

import { HotWrap } from './style'

import { getHotRecommendAction } from '../../store/actionCreators'
export default memo(function Hot() {
    const [tags] = useState(['华语', '流行', '摇滚', '民谣', '电子'])

    //store
    const { hotRecommedns } = useSelector(state => ({
        hotRecommedns: state.getIn(['recommend', 'hotRecommedns'])
    }), shallowEqual)

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getHotRecommendAction())
    },[dispatch])

    function callback(e){
        return false
    }
    return (
        <HotWrap>
            <Header title="热门推荐" tags={tags} />
            <ul>
            {
                hotRecommedns.map((item,index) => {
                    return (
                        <li className="car-box" key={item.id}>
                            <SongList itemInfo={item} >
                                <div className="dec">
                                    <p className="title" title={item.name} onClick={callback}>
                                        {item.name}
                                    </p>
                                </div>
                            </SongList>
                        </li>
                    )
                })
            }
            </ul>
        </HotWrap>
    )
})